﻿<!-- 继承公共视图文件 -->
<!-- 方法一：-->
<!-- <extend name="./Application/Admin/View/layout.html" /> -->
<!-- 方法二：-->
<extend name="Public:layout" />
<block name="mid">

<div class="row">
	<div class="col-md-6">
		<div class="panel">
			<div class="panel-heading bk-bg-primary">
				<h6><i class="fa fa-indent red"></i>添加员工</h6>
			</div>
			<div class="panel-body">
			<!-- action=""没有值 ，则默认提交到当前路径-->
				<form id="signupForm" action="" method="post" enctype="multipart/form-data" class="form-horizontal ">
					<div class="form-group">
							<label class="col-md-2 control-label" for="file-input">头像</label>
							<div class="col-md-9">
								<input id="file-multiple-input" name="file" multiple type="file">
							</div>
						</div>
					<div class="form-group">
	                    <label class="col-md-2 control-label" for="text-input">用户名</label>
	                    <div class="input-group">
	                        <input id="adminName" name="name" class="form-control" placeholder="请输入用户名" type="text">
	                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
	                    </div>
	                     <!-- <span class="help-block pull-right">This is a help text</span> -->
	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="email-input">真实姓名</label>
	                    <div class="input-group">
	                        <input id="realName" name="realname" class="form-control" placeholder="请输入真实姓名" type="text">
	                        <span class="input-group-addon"><i class="fa fa-key"></i></span>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="email-input">密码</label>
	                    <div class="input-group">
	                        <input id="adminPass" name="pass" class="form-control" placeholder="请输入密码" type="text">
	                        <span class="input-group-addon"><i class="fa fa-key"></i></span>
	                    </div>

	                </div>
	                 <div class="form-group">
	                    <label class="col-md-2 control-label" for="email-input">确认密码</label>
	                    <div class="input-group">
	                        <input id="cPass" name="cPass" class="form-control" placeholder="请输入确认密码" type="text">
	                        <span class="input-group-addon"><i class="fa fa-key"></i></span>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="password-input">邮箱</label>
	                    <div class="input-group">
	                        <input id="adminEmail" name="email" class="form-control" placeholder="请输入邮箱" type="text">
	                        <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="password-input">QQ</label>
	                    <div class="input-group">
	                        <input id="adminQQ" name="qq" class="form-control" placeholder="请输入QQ" type="text">
	                        <span class="input-group-addon"><i class="fa fa-linux"></i></span>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="password-input">电话</label>
	                    <div class="input-group">
	                        <input id="tel" name="tel" class="form-control" placeholder="请输入电话" type="text">
	                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <label class="col-md-2 control-label" for="password-input">地址</label>
	                    <div class="input-group">
	                        <input id="input1-group1" name="addre" class="form-control" placeholder="请输入地址" type="text">
	                        <span class="input-group-addon"><i class="fa fa-truck"></i></span>
	                    </div>

	                </div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="select">所属角色</label>
						<div class="col-md-2">
							<select id="select" name="group_id" class="form-control" size="1">
								<option >请选择角色</option>
								<foreach name="group" item="v">
									<option value="{$v.id}">{$v.title}</option>
								</foreach>
							</select>
						</div>
					</div

						<div class="form-group">
							<label class="col-md-2 control-label">性别</label>
							<div class="col-md-9">
								<div class="radio-custom radio-inline">
									<input id="radio1" name="sex" value="0" type="radio" ><!-- required 表示必须选中一个。 -->
									<label for="radio1">男</label>
								</div>
								<div class="radio-custom radio-inline">
									<input id="radio2" name="sex"  value="1" type="radio">
									<label for="radio2">女</label>
								</div>
							</div>

						</div>

						<div class="form-group">
		                    <label class="col-md-2 control-label" for="email-input">验证码</label>
		                    <div class="input-group">
		                        <input id="adminPass" name="code" class="form-control" placeholder="请输入验证码" type="text">

								<input type="button" id="code" class="form-control" name="input1-group1" value="手机发送验证码">
		                    </div>
	                </div>

					<button type="submit" class="bk-margin-5 btn btn-success">提交</button>
				</form>
			</div>
		</div>
	</div>
</div>

</block>

<block name="js">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 必须在引入jq文件之前引入 -->
	<script src="__ADMIN__assets/js/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 在键盘按下并释放及提交后验证提交表单
			// 抓取验证表单的id
			$("#signupForm").validate({
				// debug:true,//开发的时候阻止表单提交
			    //要验证的规则
			    rules: {
			    	// 'adminName':'required',//必填验证 单个规则写法
			    	//多个验证规则写法：
			    	//用户名校验
			    	'name':{
				    	required: true,
				    	maxlength:10,
	       				minlength: 2,
			    	},
			    	//密码校验
			    	'pass':{
			    		required: true,
						maxlength:16,
	       				minlength: 6,
			    		// equalTo:"#cPass",//密码输入框与确认密码输入框的值一样

			    	},
			    	//确认密码校验
			    	'cPass':{
			    		required: true,
			    		equalTo:"#adminPass",//密码输入框与确认密码输入框的值一样
			    	},
			    	//邮箱校验
			    	'email':{
			    		required: true,
			    		email:true,
			    	},


			    	//性别：可以在标签那里验证，也可以在这里验证
			    	//因为之前的radio标签已经有选中效果，因此加验证再点击的时候其实已经选中了，但是不显示
			    	// 'adminSex':{
			    	// 	required: true,
			    	// },
			    },
			    //错误信息描述
			    messages: {
			    	// adminName:'请输入用户名',
			    	name:{
			    		required: "用户名不能为空",
				        maxlength: "用户名必须不超过10位数",
				        minlength: "用户名必须多于2位数",
			      },
			      pass:{
			    		required: "密码不能为空",
				        maxlength: "密码必须不超过16位数",
				        minlength: "密码必须多于6位数",
				        // equalTo:"确认密码与密码不一致",
			      },
			       cPass:{
			    		required: "确认密码不能为空",
				        equalTo:"确认密码与密码不一致",
			      },
			       email:{
			    		required: "邮箱不能为空",
				        email:"请输入正确的邮箱格式",
			      },
			      // adminSex:{
			    		// required: "请选择性别",
			      // },
			    },
			     errorElement:'span',
			     errorClass:'error',//在layput.html页面定义了提示信息的字体颜色
			});

			//验证码60秒倒计时
			var s=5;
			var time=0;
			$('#code').click(function() {
				var obj=$(this);//因为在setInterval里面可能不知道$this是什么
				var tel=$('#tel').val();//获取手机号码
				// alert(adminTel);

				//验证码发送提交
				$.ajax({
					url:"{:U('admin/ajax/send_sms')}",
					type:'post',
					data:{
						'tel':tel,
					},
					success:function(code){
						// alert(code);
						if (code>0) {
							alert('验证码发送成功');
						}else{
							alert('验证码发送失败');
						}
					}
				})

				time=setInterval(function(){
					if (s>0) {
						var text=s+'秒后重新发送验证码(短信已发送)';
						obj.val(text);
						obj.attr('disabled','disabled');//添加禁用的属性
						s--;
					}else{
						s=5;
						var text='手机发送验证码';
						obj.val(text);
						obj.prop('disabled',false);
						clearInterval(time);//关闭倒计时
					}
				},1000);

			})

		})

	</script>
</block>
